<template>
    <div id="app">
        <ul>
            <li @click="view='elNav'">菜单</li>
            <li @click="view='prize'">评价</li>
            <li @click="view='product'">商家</li>
        </ul>   
        <div class="con">
             <transition 
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            >
                <keep-alive>
                    <component :is="view"></component>
                </keep-alive>
             </transition>
        </div> 
        <div id="demo">
            <button @click="show=!show">toggle</button>
            <transition 
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            >
                <p v-show="show" class="text">hello</p>
            </transition>
        </div>
        <ul-li :file="file"></ul-li>
    </div>
</template>

<script>
import elNav from './components/elNav'
import product from './components/product'
import prize from './components/prize'
import ulLi from './components/ul-li'
import fileData from '../mock/file.json'
export default {
    name: 'App',
    components: {
        elNav,
        product,
        prize,
        ulLi
    },
    data(){
        return {
            view:'elNav',
            show:false,
            file:fileData
        }
    }
}
</script>

<style>
@import 'https://cdn.jsdelivr.net/npm/animate.css@3.5.1';
.text{
    width:100px;
    height:100px;
    background: red;
}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
